<script>
import CarouselPage from "@/views/home/components/CarouselPage.vue";
import LiveCourse from "@/views/home/components/liveCourse.vue";
import CoursesPage from "@/views/home/components/CoursesPage.vue";
import TopTips from "@/views/home/components/TopTips.vue";
import FooterPage from "@/views/home/components/footerPage.vue";
import TopCeiling from "@/views/home/components/TopCeiling.vue";
import BoutiquePage from "@/views/home/components/boutiquePage.vue";
import DiscountPage from "@/views/home/components/discountPage.vue";
import {drop_down} from "@/API/http";
import LoginPage from "@/views/home/components/loginPage.vue";
import $ from 'jquery';
import CustomerRight from "@/views/home/components/CustomerRight.vue";
export default {
  name: "homePage",
  components: {
    CustomerRight,
    LoginPage,
    DiscountPage, BoutiquePage, TopCeiling, FooterPage, TopTips, CoursesPage, LiveCourse, CarouselPage
  },
  data() {
    return {
      CourseList: [],
      // 下拉框参数
      drop: {
        enable: 1
      }
    }
  },
  // 上面的搜索框
  methods: {

    // 搜索框
    onSearch(value) {
      console.log(value);
    },
  },
  created() {
    drop_down(this.drop).then(res => {
      this.CourseList = res.rows;
    })
  },
  mounted() {
    $(window).scroll(function () {
      $(window).scrollTop() >= 400?$('.CeilingBox').show():$('.CeilingBox').hide()
    })
  }
}
</script>

<template>
  <div class="body">
    <!-- 上边背景图-->
    <div class="content">
      <!--  吸顶组件-->
      <div class="CeilingBox">
        <TopCeiling class="Ceiling">

        </TopCeiling>
      </div>

      <div class="topBg">
        <div class="w logoBox">
          <img class="logo" src="../../assets/logo-text.png">
        </div>
        <!--顶部导航-->
        <div class="w top">
          <!--      左面导航-->
          <ul class="topNav">
            <li>首页</li>
            <li>
              <!--下拉框-->
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="color: white">
                  课程分类
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-for="item in CourseList" :key="item.subjectId">
                    <a href="javascript:;">{{ item.subjectTitle }}</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-icon type="down"/>
            </li>
            <li>教学管理云平台</li>
          </ul>

          <!--      右面搜索框-->
          <div class="topRight">
            <div class="searchBox">
              <a-input-search placeholder="搜索课程" enter-button @search="onSearch"  size="large" />
              <br/><br/>
            </div>
            <!--      购物车-->
            <div class="shopIcon">
              <img src="../../assets/shop==.png">
            </div>
            <!--      登录-->
            <div>
              <login-page>

              </login-page>
            </div>
          </div>

        </div>

      </div>
      <!--  轮播图组件-->
      <CarouselPage class="w">
      </CarouselPage>
      <!--  直播课程组件-->
      <LiveCourse class="w">

      </LiveCourse>
      <!--底下的课程-->
      <CoursesPage class="w">
        <template #top>
          <div class="CouresBoxPage">
            <img src="@/assets/free.png" alt="" width="40">
            <h2>免费课程</h2>
          </div>
        </template>
      </CoursesPage>

      <boutique-page class="w">
        <template #top>
          <div class="CouresBoxPage">
            <img src="@/assets/精品.png" alt="" width="40">
            <h2>精品课程</h2>
            <img src="@/assets/vip-free.png" alt="" width="100" height="37">
          </div>
        </template>
      </boutique-page>

      <discount-page class="w">
        <template #top>
          <div class="CouresBoxPage">
            <img src="@/assets/time-limit.png" alt="" width="40">
            <h2>限时折扣</h2>
            <img src="@/assets/vip-free.png" alt="" width="100" height="37">
          </div>
        </template>
        <template #juhui>
          <div class="juhui">限时钜惠</div>
        </template>
      </discount-page>

      <TopTips class="w">
        <template #top>
          <div class="CouresBoxPage">
            <img src="@/assets/头条.png" alt="" width="40">
            <h2>头条精选</h2>
          </div>
        </template>
      </TopTips>

      <CustomerRight class="right-box"></CustomerRight>
    </div>
    <!--  底部-->
    <footer-page class="footePage">

    </footer-page>

  </div>
</template>

<style scoped lang="less">
.right-box{
  position: fixed;
  right: 0;
  top: 50%;
}
.body {
  height: 100%;
  background-color: #edf1f7;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

//顶部Logo
.logoBox {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  margin: 30px 0
}

//背景
.topBg {
  width: 100%;
  height: 300px;
  background: url("../../assets/index-top-bg.564836d0.png") no-repeat;
  background-size: 100% 100%;
}

.topRight {
  position: relative;
  align-items: flex-end;
  display: flex;
}

.top {
  display: flex;
  justify-content: space-between;
}

//顶部导航
.topNav {
  font-weight: 700;
  font-size: 16px;
  color: white;
  justify-content: space-evenly;
  width: 30%;
  display: flex;
  align-items: flex-end;
}

//搜索框
.searchBox {
  display: flex;
  align-items: flex-end;
  width: 300px;
}

//购物车
.shopIcon {
  margin: 0 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 40px;
  height: 40px;
  //border: 1px solid black;
  box-shadow: 0px 0px 5px gray;
  border-radius: 50%;
  background-color: white;
}

//登录注册按钮

.loginBox {
  box-shadow: 0px 0px 5px gray;
  padding: 2px;
  font-size: 18px;
  font-weight: bold;
  //color: #35c7de;
  overflow: hidden;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
}

//底下的课程
.CouresBoxPage {
  display: flex;

  h2 {
    margin: 0 10px;
  }
}

//限时钜惠
.juhui {
  margin-left: auto;
  color: #fa8c59;
  border: 1px solid #fc8b33;
  padding: 3px 5px;
  background: #fff7e6;
}

//底部样式
.footePage {
  background: #0f141a;
}

//吸顶
.Ceiling {
  margin: 0 auto;
}

.CeilingBox {
  display: none;
  z-index: 2;
  width: 100%;
  position: fixed;
  top: 0;
  background: white;
}
:deep(.ant-input-group-addon){
  background: rgba(0,0,0,0);
}
:deep(.ant-btn-primary){
  width: 60px;
  background: rgba(0,0,0,0);
}
:deep(.ant-input-group-addon:hover){
  background: rgba(0,0,0,0);
}
:deep(.ant-btn-primary:hover){
  background: rgba(0,0,0,0);
}
:deep(.ant-input){
}
</style>